<template>
  <div class="demo" ref="chart1"></div>
</template>

<script>
import * as echarts from "echarts";
import {
  ref,
  onMounted,
  onUnmounted,
  getCurrentInstance,
} from "vue";
export default {
  setup() {
    let tips = ref("Hello Vue3");
    let interval1;
    let getOption=()=>{
      let generateData=()=>{
      let obj=[];
      for (let index = 0; index < 5; index++) {
        let arr=[];
        for (let index = 0; index <7; index++) {
          let n=Math.floor(Math.random()*1500+1);
          arr.push(n);
        }
        obj.push(arr)
      }
      return obj
    }
    let [d1,d2,d3,d4,d5]=generateData();
    let option = {
      title: {
        text: "Stacked Area Chart",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: d1,
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data:d2,
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: d3,
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: d4,
        },
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          smooth: true,
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: d5,
        },
      ],
    };
    return option;
    };
    let initChart=(dom,option)=>{
      let chart=echarts.init(dom,null,{renderer:'svg'})
      chart.setOption(option)
    }
    onMounted(() => {
      let _this = getCurrentInstance();
      console.log(_this, "_this");
      let {chart1}=_this.ctx.$refs;
      initChart(chart1,getOption());
      interval1=setInterval(()=>{
        initChart(chart1,getOption())
      },2000);
    });
    onUnmounted(()=>{
        clearInterval(interval1);
        console.log('===clearSuccess!===');
      });
    return {
      tips,
    };
  },
};
</script>

<style lang="less" scoped>
.demo {
  width: 1000px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>